<template>
	<view class="container" :style="{'grid-template-columns':'repeat('+column+', 1fr)'}">
		<view class="item" v-for="(item, index) in list" :key="index" :style="{'height':item_higth+'px'}">
			<slot :item="item" :index="index"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"virtual-list",
		data() {
			return {
				item_higth: 0
			};
		},
		props: {
			column: {
				type: Number,
				default: 1
			},
			list: Array,
			itemHeight: {
				type: Number,
				default: 0
			}
		},
		created() {
			this.item_higth = this.itemHeight
		},
		mounted() {
			if(this.item_higth == 0) {
				const _this = this
				const query = uni.createSelectorQuery().in(this);
				query.select('.item').boundingClientRect(data => {
				  if (data) {
					_this.item_higth = data.width
				  }
				}).exec();
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.container {
	display: grid;
	grid-gap: 20rpx;
}
.item{
	background-color: #333;
	height: 0;
	/* padding-bottom:100%; *//*高度设置为0，使用内间距100%，将匡高设置为一致*/
	/* position: relative; */
}
</style>